<template>
  <div class="box">
    <!-- 规则89 -->
    <div class="rulebox"
         v-if="ruleNum == 89">
      <div class="ruletitle">套餐使用规则</div>
      <div class="ruletext">
        1、优惠办理成功后下个月结日生效，办理后不能取消优惠，合约期为24个月。每月需正常使用89元或以上套餐并至优惠合约期满，期间只允许向上调整套餐资费，不得取消、向下变更套餐。合约期满后如不再使用套餐，需主动取消。
      </div>
      <div class="ruletext">
        2、需承诺24个月每月最低消费89元，最低消费合约期与优惠合约期一致。最低消费按自然月计算，如当月消费不足最低消费额度或整月停机的仍按最低消费收取。
      </div>
      <!-- 新业务包 -->
      <div class="ruletitle">新业务包说明</div>
      <div class="ruletext">
        需承诺使用新业务包12个月，优惠办理成功新业务包立即生效，办理后不能取消，到期自动失效。新业务包每月需扣费25元，业务包包括：任我换月包（15元/月）、咪咕视频权益流量包（2元/月）、（1T个人云+1T家庭云）定向免流（8元/月），业务详情及使用可详询10086。
      </div>
      <!-- 2 -->
      <div class="ruletitle">赠送的金币使用规则</div>
      <div class="ruletext">
        金币到账后30天内有效，不可折算现金，不设找零，到期自动失效。只限用于“广东移动”APP兑换5G手机或指定终端设备商品。
      </div>
      <!-- 3 -->
      <div class="ruletitle">赠送的消费红包说明</div>
      <div class="ruletext">
        赠送的200元消费红包立即到账，到账后3个月内有效（动态月），到期自动失效。可通过广东移动APP-生活频道消费红包按钮查看有效期，消费红包不可折算现金，不设找零，只限用于“广东移动”APP兑换虚拟商品或实物商品（线上兑换的商品是否可退换以商品具体页面为准）。
      </div>
      <!-- 3 -->
      <div class="ruletitle">赠送的流量说明</div>
      <div class="ruletext">
        合约期24个月内每月自动赠送2G国内通用流量（不含港澳台地区），办理本优惠成功后首月立即赠送到账，后续每月月结到账。赠送流量不可用于流量共享、流量转赠、流量转移、不享受流量不清零。合约期满自动失效。
      </div>
      <!-- 4 -->
      <div class="ruletitle">办理限制</div>
      <div class="ruletext">
        本优惠每个号码只能办理1次，不可重复办理。参与本优惠后，合约期内不可以再参与优惠购机、话费优惠等其它合约类优惠。
      </div>
      <!-- 5 -->
      <div class="ruletitle">违约赔付说明</div>
      <div class="ruletext">
        合约期内如客户如办理套餐降档、中断营销活动、转换品牌、过户、停机、销户、离网等提前结束优惠的，视为违约。对于合约期内尚未享受的优惠将不再享受，同时客户需按剩余月份的套餐的总额作为解约条款约定缴纳违约金。
        注意：办理本业务请详读知晓<span style="color:#f1b073"
              @click="rouCilck">《解约条款》</span>。以上业务存在在网协议期限，请详细阅读后确认办理。
      </div>
      <!-- 6 -->
      <div class="ruletitle">机卡和一要求说明</div>
      <div class="ruletext">
        使用本优惠赠送金币购买5G手机的客户，须从办理优惠次月连续3个月（自然月）符合机卡合一要求，如不符合，将从办理优惠号码按月扣取机卡分离协议费80元/月。
        机卡合一要求：办理本优惠的号码或其欢乐在线（家庭短号网）成员/万能副号成员合一使用（连续3个月每月产生不少于5天的有效通话或上网流量不低于100MB，按所购手机的卡槽1IMEI通信情况进行判定）。如未达到使用要求，将按协议约定对办理优惠号码按月扣取机卡分离协议费80元/月。如上述的3个月内有2个月及以上未达到上述要求，在上述基础上，将从办理优惠的第6个月起连续6个月收取协议补扣费，合计最多扣取9个月的机卡分离协议费。
      </div>

    </div>
    <!-- 规则59 -->
    <div class="rulebox"
         v-if="ruleNum == 59">
      <div class="ruletitle">套餐使用规则</div>
      <div class="ruletext">
        1、优惠办理成功后下个月结日生效，办理后不能取消优惠，合约期为24个月。期间只允许向上调整套餐资费，不得取消、向下变更套餐。合约期满后如不再使用套餐，需主动取消。
      </div>
      <div class="ruletext">
        2、根据所选套餐优惠档次，需承诺24个月每月最低消费59/89元，最低消费合约期与优惠合约期一致。最低消费按自然月计算，如当月消费不足最低消费额度或整月停机的仍按最低消费收取。
      </div>
      <!-- 2 -->
      <div class="ruletitle">赠送的金币使用规则</div>
      <div class="ruletext">
        金币到账后30天内有效，不可折算现金，不设找零，到期自动失效。只限用于“广东移动”APP兑换5G手机或指定终端设备商品。
      </div>
      <!-- 3 -->
      <div class="ruletitle">赠送流量说明</div>
      <div class="ruletext">
        合约期24个月内每月自动赠送2G国内通用流量（不含港澳台地区），办理本优惠成功后首月立即赠送到账，后续每月月结到账。赠送流量不可用于流量共享、流量转赠、流量转移、不享受流量不清零。合约期满自动失效。
      </div>
      <!-- 4 -->
      <div class="ruletitle">办理限制</div>
      <div class="ruletext">
        本优惠每个号码只能办理1次，不可重复办理。参与本优惠后，合约期内不可以再参与优惠购机、话费优惠等其它合约类优惠。
      </div>
      <!-- 5 -->
      <div class="ruletitle">违约赔付说明</div>
      <div class="ruletext">
        合约期内如客户如办理套餐降档、中断营销活动、转换品牌、过户、停机、销户、离网等提前结束优惠的，视为违约。对于合约期内尚未享受的优惠将不再享受，同时客户需按剩余月份的套餐的总额作为解约条款约定缴纳违约金。
        注意：办理本业务请详读知晓<span style="color:#f1b073"
              @click="rouCilck">《解约条款》</span>。以上业务存在在网协议期限，请详细阅读后确认办理。
      </div>
      <!-- 6 -->
      <div class="ruletitle">机卡和一要求说明</div>
      <div class="ruletext">
        使用本优惠赠送金币购买5G手机的客户，须从办理优惠次月连续3个月（自然月）符合机卡合一要求，如不符合，将从办理优惠号码按月扣取机卡分离协议费80元/月。
        机卡合一要求：办理本优惠的号码或其欢乐在线（家庭短号网）成员/万能副号成员合一使用（连续3个月每月产生不少于5天的有效通话或上网流量不低于100MB，按所购手机的卡槽1IMEI通信情况进行判定）。如未达到使用要求，将按协议约定对办理优惠号码按月扣取机卡分离协议费80元/月。如上述的3个月内有2个月及以上未达到上述要求，在上述基础上，将从办理优惠的第6个月起连续6个月收取协议补扣费，合计最多扣取9个月的机卡分离协议费。
      </div>

    </div>
    <!-- 其他规则 -->
    <div class="rulebox"
         v-if="rests">
      <div class="yell">
        客户承诺使用千兆宽带，享智能套餐装直降优惠
      </div>
      <div class="yell">
        [ 限定条件 ]
      </div>
      <div class="yell">
        办理条件说明：使用珠海移动号码3年以上的宽带客户（若客户为原千兆宽带客户则不可以参与该活动）
      </div>
      <div>[ 宽带说明 ]</div>
      <div class="ruletext">
        1、<span class="yell">生效时间</span>办理当日立即生效。
      </div>
      <div class="ruletext">
        2、宽带升级业务需在我司宽带网络覆盖范围内才可办理，否则办理后速率不能得到提速。
      </div>
      <div class="ruletext">
        3、宽带提速包优惠为叠加产品，是在原宽带月租费用不变的情况下，每月额外增加的费用。
      </div>
      <div class="ruletext">
        4、宽带速率指用户终端接入到中国移动宽带网络的最高速率，实际可达速率受到被访问网站、应用、客户设备等综合因素影响，存在一定范围的波动和差异，若使用测速工具测试出的速率和最高可达速率差异不大，属正常。若速率差异较大，可到就近沟通100服务厅或致电1008616咨询确认。
      </div>
      <div class="ruletext">
        5、千兆网速受到多个因素影响，一般来说，达到千兆网速需同时具备以下条件：1）光纤入户（FTTH模式），光猫具备千兆网口；2）千兆网络对于网线的最低要求是“超五类”或“六类线”；3）路由器需更换为千兆路由器；4）电脑网卡需为千兆网卡。
      </div>
      <div class="ruletext">
        6、以上所有速率升级产品，均仅适用手机宽带客户，独立宽带客户不适用。FTTB（光纤到楼）及第三方合作宽带客户受本地网络线路限制，不参与本次活动提速优惠。（即只有FTTH光纤到户，光猫安装在室内的用户才可以参与）。
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'

export default defineComponent({
  props: {
    ruleNum: {
      type: Number,
      default: ''
    },
    rests: {
      type: Number,
      default: ''
    }
  },
  name: 'Login',
  components: {},
  setup() {
    const { proxy }: any = getCurrentInstance()
    const state: any = reactive({
      num: 589
    })
    function rouCilck() {
      console.log('dddd')
      window.location.href = 'https://gd.10086.cn/gmccapp/webpage/protocol/terminate.html'
    }

    // 关闭
    onMounted(() => {
      console.log(proxy.ruleNum, 'djjjdf')
    })

    return {
      ...toRefs(state),
      rouCilck
    }
  }
})
</script>

<style lang="scss" scoped>
.box {
  // 规则
  .rulebox {
    width: 350px;
    height: 200px;
    // margin: 20px 10px 0 10px;
    margin: 20px auto;
    border: 1px solid #fbf4f4;
    overflow-y: scroll;
    padding: 5px 0px 5px 15px;
    font-size: 12px;
    color: #fff;
    .ruletitle {
      color: #fff;
      font-weight: 600;
      margin: 10px 0;
    }
    .ruletext {
      font-size: 12px;
      // line-height: 13px;
      opacity: 0.9;
      white-space: pre-line;
      word-wrap: break-word;
    }
  }
  .yell {
    color: #efc001;
  }
}
// ::-webkit-scrollbar {
//   // 直接复制黏贴到样式页.css，完美解决
//   // display: none;
//   width: 5px;
//   background: #ab0f08;
// }
.rulebox::-webkit-scrollbar {
  width: 10px;
}

.rulebox::-webkit-scrollbar-track {
  background-color: red;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.rulebox::-webkit-scrollbar-thumb {
  background-color: #ab0f08;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
</style>
